<template>
	<div class="icons">
		<swiper :options="swiperOption" >
			<swiper-slide v-for='(page,index) of pages' :key='index'> <!-- 这里确定有几个轮播面 -->
				<div class="icon" v-for="item of page" :key="item.id">
					<div class="icon-img">
						<img :src="item.imgUrl" class="	icon-img-content">
					</div>
					<p class="ico-desc">{{item.desc}}</p>
				</div>
			</swiper-slide>
		</swiper>	
	
	</div>
	
</template>
<script type="text/javascript">
export default {
	name:'Icons',
	props:{
		icon:Array
	},
	data() {
		return {
			swiperOption: {
					loop:true ,  //决定是否循环轮播
					autoplay:false
				}
		}
	},
	computed:{
		pages (){
			const  pages = [];  //这个数组储存页数
			this.icon.forEach((item,index) => {
				const page = Math.floor(index/8) //判断每个被遍历到的元素应该在第几页
				if (!pages[page]) { //如果没有遍历到元素，即index为空，则置分数组为空
					pages[page] = [];

				}
				 pages[page].push(item)//不为空，则把被遍历到的元素按照page值添加到相对于的子数组
			})

			return pages;
		}
	}
}
	
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
	.icons {
		overflow: hidden;
		height: 0;
		padding-bottom: 50%;
	/*	background-color: green;*/

	}
	.icon>>>.swiper-container {
		height: 0
		padding-bottom:50%;
	}
	.icon {
		position: relative;
		overflow: hidden;
		width: 25%;
		float: left;
		height: 0;
		padding-bottom: 25%;
		/*background-color: red;*/
	}
	.icon-img {

		box-sizing: border-box;
		padding: .1rem;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: .44rem;
		/*background-color: blue*/
	}
	.icon-img-content {
		display: block;
		margin: .15rem auto;
		height: 100%;
	}
	.ico-desc {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		line-height: .44rem;
		height: .44rem;
		color: $dartTextColor;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
</style>